<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">开具发票</view>
		</view>
		<view class="clear_box"></view>

		<view class="details_box">
			<view class="list">
				<view class="name">发票类型</view>
				<input disabled="true" type="text" value="普通发票-电子" placeholder="请输入"
					placeholder-style="color:#B5B5B5" />
			</view>
			<view class="list">
				<view class="name">抬头类型</view>
				<view class="radio_box">
					<radio-group @change="radioChange">
						<label class="radio">
							<radio color="#FF7701" value="1" checked="true" />企业
						</label>
						<label class="radio">
							<radio color="#FF7701" value="2" />个人/事业单位
						</label>
					</radio-group>
				</view>
			</view>
			<view class="list">
				<view class="name">发票抬头</view>
				<input type="text" v-model="buyer_name" value="" placeholder="填写需要开具发票的企业名称" placeholder-style="color:#B5B5B5" />
			</view>
			<block v-if="slt == 1">
			<view class="list">
				<view class="name">税号</view>
				<input type="text" v-model="buyer_no" value="" placeholder="纳税人识别号" placeholder-style="color:#B5B5B5" />
			</view>
			<view class="list">
				<view class="name">开户银行</view>
				<input type="text" v-model="bank_name" value="" placeholder="选填" placeholder-style="color:#B5B5B5" />
			</view>
			<view class="list">
				<view class="name">银行账号</view>
				<input type="text" v-model="bank_no" value="" placeholder="选填" placeholder-style="color:#B5B5B5" />
			</view>
			<view class="list">
				<view class="name">企业地址</view>
				<input type="text" v-model="address" value="" placeholder="选填" placeholder-style="color:#B5B5B5" />
			</view>
			<view class="list">
				<view class="name">企业电话</view>
				<input type="text" v-model="phone" value="" placeholder="选填" placeholder-style="color:#B5B5B5" />
			</view>
			</block>

		</view>

		<view class="details_box">
			<view class="list">
				<view class="name">发票内容</view>
				<input disabled="true" type="text" value="商品明细" placeholder="请输入" placeholder-style="color:#B5B5B5" />
			</view>
			<view class="list">
				<view class="name">发票金额</view>
				<input disabled="true" v-model="money" type="text" value="" placeholder="请输入"
					placeholder-style="color:#B5B5B5" />
			</view>

		</view>
		<view class="confirm" @click="commit()">提交</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				slt:1,
				buyer_name:'',
				buyer_no:'',
				bank_name:'',
				bank_no:'',
				address:'',
				phone:'',
				id:0,
				money:'',
			}
		},
		onLoad(e) {
			let that = this;
			that.id = e.id;
			that.money = e.money+'元';
		},
		methods: {
			radioChange(e){
				let that = this;
				console.log(e.detail.value);
				that.slt = e.detail.value;
			},
			commit() {
				let that = this;
				if (!that.buyer_name){
					that.Msg.Fail('请填写发票抬头');
					return;
				}
				let param = {
					order_id:that.id,
					rise_type:that.slt,
					buyer_name:that.buyer_name,
					buyer_no:that.buyer_no,
					bank_name:that.bank_name,
					bank_no:that.bank_no,
					address:that.address,
					phone:that.phone,
				};
				that.Net._post('auth/add_invoice', param, res => {
					if (res.code == 200) {
						that.Msg.Success('提交成功', res => {
							uni.navigateBack({});
						});
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			// that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
			//   if (res.code == 200) {
			//     //console.log(res)
			//     if (res.data.data == '') {
			//       uni.showToast({
			//         title: '已经是最后一页了',
			//         duration: 2000,
			//         icon: 'none'
			//       });
			//     } else {
			//       that.info = that.info.concat(res.data.data); //将数据拼接在一起
			//     }
			//   } else if (res.code == 0) {
			//     that.Msg.Success(res.msg, res => {});
			//   }
			// });
		},
	}
</script>

<style>
	.scrrolHeader {
		background-color: #FF7701 !important;
	}

	.details_box {
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		padding: 0 4%;
		border-radius: 3vw;
	}

	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}

	.details_box .list .name {
		font-size: 3.8vw;
		color: #333;
		margin-right: 4vw;
	}

	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
	}

	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #B5B5B5;
	}
	
	.details_box .list .radio_box{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.details_box .list .radio_box .radio{
		margin-left: 3vw;
	}
	
	.details_box .list .radio_box .radio radio{
		font-size: 3.5vw;
	}
</style>